<template>
  <div ref="chart" class="chartBox" />
</template>

<script>

export default {
  mounted() {
    this.chartFn()
  },
  methods: {

    chartFn() {
      const myChart = this.$echarts.init(this.$refs.chart)
      const data = {
      // 数据项鼠标经过提示
        tooltip: {},
        // 绩效数据考核对象
        legend: {
          data: ['张三', '李四']
        },
        // 雷达图配置项
        radar: {
        // 控制维度指标样式
          axisName: {
            color: '#fff',
            backgroundColor: '#999',
            borderRadius: 3,
            padding: [3, 5]
          },
          // 指定雷达图展示数据的维度
          indicator: [
            { name: '工作效率', max: 100 },
            { name: '考勤', max: 100 },
            { name: '积极性', max: 100 },
            { name: '帮助同事', max: 100 },
            { name: '自主学习', max: 100 },
            { name: '正确率', max: 100 }
          ]
        },
        // 图标数据的配置项
        series: [{
          type: 'radar',
          // areaStyle: {normal: {}},
          // 雷达图数据
          data: [
            {
              value: [10, 100, 10, 50, 100, 10],
              name: '张三'
            },
            {
              value: [50, 50, 50, 50, 50, 10],
              name: '李四'
            }
          ]
        }]
      }
      myChart.setOption(data)
    }
  }
}
</script>

<style lang="scss" scoped>
    .chartBox{
        width: 100%;
        height: 300px;
    }
</style>
